<template>
    <a-modal v-model:visible="show"
             :title="titleName"
             :width="500"
             :maskClosable="false"
             :maskStyle="{ background: 'rgba(179,212,218,0.30)', backdropFilter: 'blur(10px)' }"
             :destroyOnClose="true"
             @ok="handleOk"
             @cancel="cancelModal">
        <a-form :model="formState" :labelCol="{span: 10}" ref="formData">
<!--            <a-row :gutter="24">-->
<!--                <a-col :span="12">-->
<!--                    <a-form-item label="上级分类" name="id">-->
<!--                        <a-tree-select-->
<!--                            v-model:value="formState.id"-->
<!--                            style="width: 100%"-->
<!--                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"-->
<!--                            :tree-data="treeData"-->
<!--                            :replaceFields="{children: 'childrenMenus', title: 'name', key: 'id', value: 'id'}"-->
<!--                            placeholder="请选择"-->
<!--                            tree-default-expand-all-->
<!--                        >-->
<!--                        </a-tree-select>-->
<!--                    </a-form-item>-->
<!--                </a-col>-->
<!--                <a-col :span="12">-->
<!--                    <a-form-item label="菜单名称" name="name">-->
<!--                        <a-input v-model:value="formState.name" style="width: 200px" placeholder="请输入菜单名称" autocomplete="off" allowClear />-->
<!--                    </a-form-item>-->
<!--                </a-col>-->
<!--            </a-row>-->
<!--            <a-row :gutter="24">-->
<!--                <a-col :span="12">-->
<!--                    <a-form-item label="菜单URL" name="name">-->
<!--                        <a-input v-model:value="formState.url" style="width: 200px" placeholder="请输入菜单url" autocomplete="off"  />-->
<!--                    </a-form-item>-->
<!--                </a-col>-->
<!--                <a-col :span="12">-->
<!--                    <a-form-item label="菜单访问权限" name="menuPermission">-->
<!--                        <a-input v-model:value="formState.menuPermission" style="width: 200px" placeholder="请输入菜单访问权限" autocomplete="off"  />-->
<!--                    </a-form-item>-->
<!--                </a-col>-->
<!--            </a-row>-->

            <a-row :gutter="0">
                <a-col :span="20">
                    <a-form-item label="所属类别" name="type">
                        <a-radio-group v-model:value="formState.type">
                            <a-radio :value = '1'>商品分类</a-radio>
                            <a-radio :value = '0'>店铺分类</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="0">
                <a-col :span="20">
                    <a-form-item label="名称" name="typeName">
                        <a-input v-model:value="formState.typeName" style="width: 200px" placeholder="请输入名称" autocomplete="off"  />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="20">
                    <a-form-item label="备注" name="remark">
                        <a-input v-model:value="formState.remark" style="width: 200px" placeholder="请输入备注" autocomplete="off"  />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="20">
                    <a-form-item label="添加时间" name="createTime">
                        <a-input disabled v-model:value="formState.createTime" style="width: 200px" placeholder="" autocomplete="off"  />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted, computed,watch} from "vue";
export default defineComponent({
    name: "commonModal",
    props: {
        data: {
            type: Object,
            required: true
        },
        visible: {
            type: Boolean,
            required: true,
            default: false
        },
        title: {
            type: String,
            default: "新增菜单"
        },
        typeName: {
            type: String
        }
    },
    setup(props, context) {
        const formData = ref()
        const formState = computed(() => {
            // if (props.data.type == 1) {
            //     props.data.type = '1'
            // } else {
            //     props.data.type = '0'
            // }
            // if (props.data.isShow == '1') {
            //     props.data.isShow = '1'
            // } else {
            //     props.data.isShow = '0'
            // }
            console.log(999,props.data)
            return props.data
        })
        const show = computed(()=> props.visible)
        const titleName = computed(()=> props.title)
        const typeName = computed(() => props.typeName)
        const state = reactive({
            treeData: JSON.parse(window.localStorage.getItem('meuns'))
        })
        // 点击确定按钮
        const handleOk = () => {
            context.emit('close',typeName.value)
        }

        // 点击取消按钮
        const cancelModal = () => {
            context.emit('close', 'cancel')
        }

        watch(show, () => {
            // if (!show) {
            //     formState.value = {}
            // }
        })

        return {
            ...toRefs(state),
            formData,
            formState,
            show,
            titleName,
            handleOk,
            cancelModal
        }
    }
})
</script>

<style scoped>

</style>